import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:sainbainu/common/models/response/group_list_response.dart';
import 'package:sainbainu/common/routes/routes.dart';
import 'package:sainbainu/common/values/colors.dart';
import 'package:sainbainu/common/widgets/group_card.dart';

import 'index.dart';

class MyGroupsPage extends GetView<MyGroupsController> {
  const MyGroupsPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<MyGroupsController>(
      builder: (_) {
        return Scaffold(
          appBar: AppBar(title: Text("我的小组".tr)),
          body: EasyRefresh.builder(
            controller: _.state.refreshController,
            onRefresh: _.onRefresh,
            childBuilder: (context, physics) {
              return _buildBody(physics);
            },
          ),
          bottomNavigationBar: _buildBottomBtns(),
        );
      },
    );
  }

  Widget _buildBody(ScrollPhysics physics) {
    return CustomScrollView(
      physics: physics,
      slivers: [
        SliverPadding(
          padding: const EdgeInsets.only(top: 15),
          sliver: SliverToBoxAdapter(
            child: _buildSectionTitle('我建立的小组'),
          ),
        ),
        SliverPadding(
          padding: const EdgeInsets.all(15),
          sliver: GetBuilder<MyGroupsController>(
            id: 'myGroupList',
            builder: (_) {
              return _buildGridView(_.state.myGroupListResponse);
            },
          ),
        ),
        SliverPadding(
          padding: const EdgeInsets.only(top: 5),
          sliver: SliverToBoxAdapter(
            child: _buildSectionTitle('我加入的小组'),
          ),
        ),
        SliverPadding(
          padding: const EdgeInsets.all(15),
          sliver: GetBuilder<MyGroupsController>(
            id: 'joinGroupList',
            builder: (_) {
              return _buildGridView(_.state.joinGroupListResponse);
            },
          ),
        ),
      ],
    );
  }

  /// 宫格列表
  Widget _buildGridView(GroupListResponse list) {
    return SliverGrid.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 5,
        crossAxisSpacing: 10,
        mainAxisSpacing: 15,
        mainAxisExtent: 85,
      ),
      itemCount: list.rows.length,
      itemBuilder: (context, index) {
        var item = list.rows[index];
        return GroupCard(
          item: item,
          onTap: () => controller.toGroupDetailPage(item),
        );
      },
    );
  }

  /// 区域标题
  Widget _buildSectionTitle(String title) {
    return Text(
      '-----${title.tr}-----',
      style: const TextStyle(
        color: AppColors.active2,
        fontSize: 12,
      ),
      textAlign: TextAlign.center,
    );
  }

  /// 底部按钮
  Widget _buildBottomBtns() {
    return BottomAppBar(
      padding: const EdgeInsets.symmetric(horizontal: 15),
      height: kBottomNavigationBarHeight,
      child: Row(
        children: [
          TextButton(
            onPressed: () => Get.toNamed(AppRoutes.groupList),
            style: TextButton.styleFrom(
              foregroundColor: AppColors.primary,
            ),
            child: const Text('加入小组'),
          ),
          const SizedBox(width: 15),
          Expanded(
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: AppColors.danger,
                foregroundColor: Colors.white,
              ),
              onPressed: () => Get.toNamed(AppRoutes.groupCreateUpdate),
              child: Text('建立小组'.tr),
            ),
          ),
        ],
      ),
    );
  }
}
